<template>
  <el-dialog 
    :model-value="visible" 
    @update:model-value="handleVisibleChange"
    title="单元详情" 
    width="600px" 
    :before-close="handleClose"
  >
    <el-descriptions :column="2" border>
      <!-- 基本信息 -->
      <el-descriptions-item label="单元名称">{{ unitDetail.unitName }}</el-descriptions-item>
      <el-descriptions-item label="单元编号">{{ unitDetail.unitNo }}</el-descriptions-item>
      <el-descriptions-item label="单元编码">{{ unitDetail.unitCode }}</el-descriptions-item>
      <el-descriptions-item label="所属社区">{{ unitDetail.communityName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="所属楼栋">{{ unitDetail.buildingName }}</el-descriptions-item>
      
      <!-- 建筑信息 -->
      <el-descriptions-item label="楼层数">{{ unitDetail.floorCount }}</el-descriptions-item>
      <el-descriptions-item label="房间数">{{ unitDetail.roomCount || 0 }}</el-descriptions-item>
      <el-descriptions-item label="户数">{{ unitDetail.householdCount || 0 }}</el-descriptions-item>
      <el-descriptions-item label="单元面积">{{ unitDetail.area ? `${unitDetail.area} 平方米` : '-' }}</el-descriptions-item>
      <el-descriptions-item label="单元类型">住宅</el-descriptions-item>
      <el-descriptions-item label="管理员">{{ unitDetail.managerName || '-' }}</el-descriptions-item>
      
      <!-- 设施配置 -->
      <el-descriptions-item label="电梯配置">{{ unitDetail.hasElevator ? '有电梯' : '无电梯' }}</el-descriptions-item>
      <el-descriptions-item label="电梯数量" v-if="unitDetail.hasElevator">{{ unitDetail.elevatorCount || 0 }} 台</el-descriptions-item>
      <el-descriptions-item label="门禁类型">{{ getDoorAccessTypeText(unitDetail.doorAccessType) }}</el-descriptions-item>
      <el-descriptions-item label="门禁密码" v-if="unitDetail.doorAccessType === 1">{{ unitDetail.accessCode || '-' }}</el-descriptions-item>
      
      <!-- 状态信息 -->
      <el-descriptions-item label="状态">
        <el-tag :type="unitDetail.status === 1 ? 'success' : 'danger'">
          {{ unitDetail.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="排序">{{ unitDetail.sortOrder || 0 }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ unitDetail.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ unitDetail.updateTime }}</el-descriptions-item>
      
      <!-- 配套设施 -->
      <el-descriptions-item label="配套设施" :span="2">{{ unitDetail.facilities || '-' }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">{{ unitDetail.remark || '-' }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { unitApi } from '@/api/unit'

const props = defineProps({
  visible: Boolean,
  unitId: Number
})
const emit = defineEmits(['update:visible'])

const unitDetail = ref<any>({})

const getDoorAccessTypeText = (type: number) => {
  switch (type) {
    case 1: return '密码'
    case 2: return '刷卡'
    case 3: return '人脸识别'
    case 4: return '指纹'
    default: return '-'
  }
}

const handleVisibleChange = (value: boolean) => {
  emit('update:visible', value)
}

const handleClose = () => {
  emit('update:visible', false)
}

const loadDetail = async () => {
  if (!props.unitId) return
  const res = await unitApi.getUnitDetail(props.unitId)
  unitDetail.value = res.data || {}
}

watch(() => props.visible, (val) => {
  if (val && props.unitId) {
    loadDetail()
  }
}, { immediate: true })
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
}
</style> 